<!--登录页面-->
<div class="landing">
    <div class="landing_title"><i class="iconfont icon-guanbi"></i></div>
    <p class="landing_title_tt">账号密码登录</p>
    <form class="userform" >
        <div class="form_content">
            <label class="form_label">
                <i class="iconfont icon-touxiang1"></i>
                <input id="logInUserName" type="text" name="username" placeholder="请输入用户名" autocomplete="off">
            </label>
        </div>
        <div class="form_content">
            <label class="form_label">
                <i class="iconfont icon-suo"></i>
                <input id="logInPassWord" type="password" name="username" autofocus="autofocus" placeholder="请输入密码" autocomplete="off">
            </label>
        </div>
        <div id="captcha1" style="width: 300px; display: inline-block;">
            <p id="wait1" class="show">正在加载验证码......</p>
        </div>
        <!--<p id="notice1" class="hide" style="color: red ; display: none">请先完成验证</p>-->
        <input id="loginn" type="button" value="登录" class="submit">
    </form> 
    <div class="landing_bottom js_submit_desiger">
        <span>注册账号</span>
    </div>           
</div>

<!--注册页面-->
<div class="landing js_desiger" style="display:none">
    <div class="landing_title"><i class="iconfont icon-guanbi"></i></div>
    <p class="landing_title_tt">注册账号</p>
    <form class="userform" >
        <div class="form_content">
            <label class="form_label">
                <i class="iconfont icon-touxiang1"></i>
                <input id="signInUserName" type="text" name="signInUserName" placeholder="用户名" >
            </label>
        </div>
        <div class="form_content">
            <label class="form_label">
                <i class="iconfont icon-suo"></i>
                <input id="signInPassWord1" type="password" name="username" autofocus="autofocus" placeholder="密码">
            </label>
        </div>
        <div class="form_content">
            <label class="form_label">
                <i class="iconfont icon-suo"></i>
                <input id="signInPassWord2" type="password" name="username" autofocus="autofocus" placeholder="确认密码">
            </label>
        </div>
        <input type="button" onclick="sigInForm()" name="" id="" value="注册" class="submit">
    </form> 
    <div class="landing_bottom js_submit_back">
        <span>返回登录</span>
    </div>           
</div>

<script type="text/javascript" src="js/geetest/gt.js"></script>
<!--增加登录滑动验证-->
<script>
    //登录滑动验证
    var handler1 = function (captchaObj) {
        //注册页面显示与关闭
        $(".js_submit_desiger").click(function(){
            $(".js_desiger").fadeIn();
            setTimeout(function(e){
                captchaObj.reset();
            },1000);
        })
        $(".js_submit_back").click(function(){
            captchaObj.reset();
            $(".js_desiger").fadeOut();
            //初始化文本框
            setTimeout(function(e){
                $("#signInUserName").val("");
                $("#signInPassWord1").val("");
                $("#signInPassWord2").val("");
            },900);
        })
        $(".changeok").click(function(e){
            //切换账户时重置验证状态
            $("#logInUserName").val("");
            $("#logInPassWord").val("");
            captchaObj.reset();
        })
        $(".banok").click(function(e){
            //切换账户时重置验证状态
            $("#logInUserName").val("");
            $("#logInPassWord").val("");
            captchaObj.reset();
        })
        $("#loginn").click(function (e) {
            var result = captchaObj.getValidate();
            if (!result) {
                // $("#notice1").show();
                // setTimeout(function () {
                //     $("#notice1").hide();
                // }, 2000);
                //未完成验证提示
                $(".js_loginname").text("请先完成验证");
                $("#js_loginframe").css("display","inline");
                setTimeout(function(e){
                    $("#js_loginframe").fadeOut();
                },1500);
                e.preventDefault();
            } else {
                var username = $("#logInUserName").val();
                var password = $("#logInPassWord").val();
                if (username == "" || password == ""){
                    captchaObj.reset();
                    $(".js_loginname").text("请输入用户名或密码");
                    $("#js_loginframe").css("display","inline");
                    setTimeout(function(e){
                        $("#js_loginframe").fadeOut();
                    },1500);
                }else {
                    $.ajax({
                        url : "music/user/logIn",
                        data : {username:username,password:password},
                        dataType : "json",
                        type : "post",
                        success : function(data) {
                            isLogin = data.logInJudge;

                            if(isLogin==true){
                                var personinfo = data.rows[0];
                                //将个人信息回显至个人信息页面
                                $(".js_infonname span").html(personinfo.nname);
                                $(".js_infousername span").html(personinfo.username);
                                $(".js_infosex span").html(personinfo.sex);
                                $(".js_infophone span").html(personinfo.phone);
                                $(".js_infoemail span").html(personinfo.email);
                                //登陆成功反馈
                                result = "";
                                userNameCurrent = data.userNameCurrent;
                                $(".js_landing").show();
                                $("#landingPage").hide();
                                $("#landingUser").css("display","none");
                                if (data.logInTip == 1){
                                    result = "登录成功";
                                }
                                $(".js_loginname").text(result);
                                $("#js_loginframe").css("display","inline");
                                setTimeout(function(e){
                                    $("#js_loginframe").fadeOut();
                                },1500);
                                // $("#afterlogin_username").text(userNameCurrent);
                                $("#afterlogin_username").text(personinfo.nname);
                                findSongLists();
                                //登陆后重新加载列表歌曲
                                $(".js_playall").click();
                            }else{
                                if (data.logInTip == 2){
                                    $("#logInPassWord").val("");
                                    result = "密码有误，请重新输入";
                                    captchaObj.reset();
                                }
                                if (data.logInTip == 0){
                                    $("#logInUserName").val("");
                                    $("#logInPassWord").val("");
                                    result = "用户不存在，请重新输入";
                                    captchaObj.reset();
                                }
                                $(".js_loginname").text(result);
                                $("#js_loginframe").css("display","inline");
                                setTimeout(function(e){
                                    $("#js_loginframe").fadeOut();
                                },1500);
                            }
                        },
                        error : function(data) {
                        }
                    });
                }

            }
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交
        captchaObj.appendTo("#captcha1");
        captchaObj.onReady(function () {
            $("#wait1").hide();
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        url: "gt/register1?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 调用 initGeetest 初始化参数
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                product: "float", // 产品形式，包括：float，popup
                width: "100%"
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handler1);
        }
    });
</script>